<template>
  <div>
    <a-form-item field="details.host" label="主机" :rules="[{ required: true, message: '请输入主机' }]">
      <a-input
          v-model="detailData.host"
          placeholder="请输入主机"
      />
    </a-form-item>

    <a-form-item field="details.port" label="端口号" :rules="[{ required: true, message: '请输入端口号' }]">
      <a-input-number
          v-model="detailData.port"
          placeholder="请输入端口号"
      />
    </a-form-item>

    <a-form-item
        field="details.dbName"
        label="数据库名称"
        :validate-trigger="['change', 'input']"
        :rules="[{ required: true, message: '请输入数据库名称' }]"
    >
      <a-input v-model="detailData.dbName" placeholder="请输入数据源名称" />
    </a-form-item>



    <a-form-item
        field="details.username"
        label="数据库账号"
        :validate-trigger="['change', 'input']"
        :rules="[{ required: true, message: '请输入数据库账号' }]"
    >
      <a-input v-model="detailData.username" placeholder="请输入数据库账号" />
    </a-form-item>


    <a-form-item
        field="details.password"
        label="数据库密码"
        :validate-trigger="['change', 'input']"
        :rules="[{ required: true, message: '请输入数据库密码' }]"
    >
      <a-input-password v-model="detailData.password" placeholder="请输入数据库密码" />
    </a-form-item>


  </div>
</template>

<script lang="ts" setup>
 const row = defineProps(['details'])
 const detailData = row.details
</script>

<style scoped lang="less">
  .container {
    padding: 20px;
  }


</style>
